import { BaseComponent, triggerManager, BaseComponentProps, emojiPlayerModel } from 'orionos-eve-core';
import React from 'react';
import { observer } from 'mobx-react';
import { Text, View, StyleSheet, Image, ImageBackground, Button, TextInput, TouchableWithoutFeedback, ScrollView } from 'react-native';
import { DemoViewModel } from './DemoViewModel';
import { DemoVoice } from './DemoVoice';
import { DemoTrigger } from './DemoTrigger';
import { demoModel } from './DemoModel';
//注册trigger跳转，必须添加，否则trigger无效
triggerManager.addTrigger(new DemoTrigger());

/**
 * 功能UI界面
 */

 const styles = StyleSheet.create({
    pageWrap: {
        width: '100%',
        height: '100%',
        position: 'relative',
    },
    image: {
        width: '100%',
        height: '100%',
    },
    
    operate: {
        width: 32,
        height: 18,
        backgroundColor: '#CCCCCC',
        borderRadius: 9,
        paddingLeft: 11,
        paddingTop: 4,
    },
    operateIcon: {
        width: 10,
        height: 10,
    },
    questionInput: {
        marginLeft: 70,
        paddingLeft: 8,
        width: 460,
        height: 24,
        lineHeight: 24,
        borderRadius: 12,
        borderColor: '#CDCDCD',
        borderWidth: 1,
        backgroundColor: 'white',
        color: '#8f8f8f',
        overflow: 'hidden',
    },
    robotContent: {
        // position: 'relative',
        paddingTop: 30,
        paddingLeft: 15,
    },
    scrollView: {
        marginTop: 5,
        height: 160,
        width: 520,
        borderWidth: 1,
    },
    robotTxtWrap: {
        flex: 1,
        flexDirection: 'row',
    },
    robotTxtWrap2: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
    robotTxt: {
        marginTop: 10,
        paddingLeft: 6,
        paddingRight: 6,
        maxWidth:420,
        // width: 514,
        minHeight: 22,
        borderRadius: 11,
        backgroundColor: '#3d87e5',
        fontSize: 14,
        lineHeight: 22,
        color: 'white', 
    },
    robotTxt2: {
        marginTop: 10,
        paddingLeft: 6,
        paddingRight: 6,
        maxWidth:420,
        // width: 514,
        minHeight: 22,
        borderRadius: 11,
        backgroundColor: 'white',
        fontSize: 14,
        lineHeight: 22,
        color: '#888888', 
    },
    userContent: {
        position: 'absolute',
        height: 40,
        bottom: 15,
        left: 0,
    },
    touchView: {
        position: 'relative',
    },
    voiceWrap: {
        position: 'absolute',
        top: -8,
        marginLeft: 18,
        width: 40,
        height: 40,
        backgroundColor: 'white',
        borderRadius: 20,
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    voiceIcon: {
        width: 24,
        height: 24,
    }
})


@observer
export class DemoScreen extends BaseComponent<BaseComponentProps, DemoViewModel, DemoVoice> {
    public viewModel: DemoViewModel
    
    public constructor(props: BaseComponentProps) {
        super(props);
        // setTimeout(()=>{
        //     emojiPlayerModel.setShow(true)
        // }, 300)
        this.viewModel = new DemoViewModel();
        let voice = new DemoVoice(this.viewModel);

        //关联ViewModel及Voice的生命周期到当前界面上
        this.setViewModel(this.viewModel);
        this.setVoice(voice);
    }
    
    public componentDidMount() {
        //重写界面的didMount，必须调用super
        super.componentDidMount();
    }

    public componentWillMount() {

    }

    public componentWillUnmount() {
        //重写界面的Unmount，必须调用super
        super.componentWillUnmount();
    }
    public render() {
        // if(this.viewModel.getFlag()){
        //     emojiPlayerModel.setShow(false)
        //     return null
        // }
        return (
            <View style={styles.pageWrap}>
                <ImageBackground style={styles.image} source={require('../../img/chatBack.jpg')} resizeMode="cover">
                    <Button title="towaitter" onPress={()=>{this.viewModel.towaitter()}}></Button>
                    <Button title="totask" onPress={()=>{this.viewModel.totask()}}></Button>
                    {demoModel.getAnswer().length > 0 &&
                        <View style={styles.robotContent}>
                            { this.viewModel.getPlayState() &&
                                <TouchableWithoutFeedback onPress={()=>{this.viewModel.pauseTTS()}}>
                                    <View style={styles.operate}>
                                        <Image style={styles.operateIcon} source={require('../../img/zanting.png')}></Image>
                                    </View>
                                </TouchableWithoutFeedback>
                            }
                            { !this.viewModel.getPlayState() &&
                                <TouchableWithoutFeedback onPress={()=>{this.viewModel.playTTS()}}>
                                    <View style={styles.operate}>
                                        <Image style={styles.operateIcon} source={require('../../img/bofang.png')}></Image>
                                    </View>
                                </TouchableWithoutFeedback>
                            }
                            <ScrollView style={styles.scrollView}>
                                {demoModel.getInfoText() &&
                                    <View style={styles.robotTxtWrap}>
                                        <Text style={styles.robotTxt}>{demoModel.getInfoText()}</Text>
                                    </View>
                                }
                                {demoModel.getAnswer() && 
                                    <View style={styles.robotTxtWrap2}>
                                        <Text style={styles.robotTxt2}>{demoModel.getAnswer()}</Text>
                                    </View>
                                }
                            </ScrollView>
                        </View>
                    }
                    <View style={styles.userContent}>
                        {this.viewModel.getVoiceOn() && 
                            <TouchableWithoutFeedback style={styles.touchView} onPress={()=>{this.viewModel.setVoiceOn(false)}}>
                                <View style={styles.voiceWrap}>
                                    <Image style={styles.voiceIcon} source={require('../../img/voiceon.png')}></Image>
                                </View>
                            </TouchableWithoutFeedback>
                        }
                        {!this.viewModel.getVoiceOn() && 
                            <TouchableWithoutFeedback style={styles.touchView} onPress={()=>{this.viewModel.setVoiceOn(true)}}>
                                <View style={styles.voiceWrap}>
                                    <Image style={styles.voiceIcon} source={require('../../img/voiceoff.png')}></Image>
                                </View>
                            </TouchableWithoutFeedback>
                        }

                        {this.viewModel.voiceOn && 
                            <Text style={styles.questionInput}>{demoModel.getInfoText()}</Text>
                        }
                    </View>
                    
                </ImageBackground>
            </View>
            
        );

    }
}


